<template>
  <view class="test-container">
    <view class="header">
      <text class="title">半小时时间选择器测试</text>
    </view>
    
    <view class="test-section">
      <text class="section-title">基础时间选择</text>
      <view class="picker-row">
        <text class="label">选择时间：</text>
        <half-hour-picker 
          :value="selectedTime1" 
          placeholder="选择时间"
          @change="onTime1Change" />
      </view>
      <text class="result">选中时间：{{ selectedTime1 || '未选择' }}</text>
    </view>
    
    <view class="test-section">
      <text class="section-title">限制时间范围 (09:00 - 18:00)</text>
      <view class="picker-row">
        <text class="label">选择时间：</text>
        <half-hour-picker 
          :value="selectedTime2" 
          placeholder="选择时间"
          start-time="09:00"
          end-time="18:00"
          @change="onTime2Change" />
      </view>
      <text class="result">选中时间：{{ selectedTime2 || '未选择' }}</text>
    </view>
    
    <view class="test-section">
      <text class="section-title">时间段选择</text>
      <view class="picker-row">
        <text class="label">开始时间：</text>
        <half-hour-picker 
          :value="startTime" 
          placeholder="选择开始时间"
          @change="onStartTimeChange" />
      </view>
      <view class="picker-row">
        <text class="label">结束时间：</text>
        <half-hour-picker 
          :value="endTime" 
          placeholder="选择结束时间"
          :start-time="startTime || '00:00'"
          @change="onEndTimeChange" />
      </view>
      <text class="result">时间段：{{ startTime || '未选择' }} - {{ endTime || '未选择' }}</text>
      <text class="duration" v-if="startTime && endTime">
        时长：{{ calculateDuration() }}
      </text>
    </view>
    
    <view class="test-section">
      <text class="section-title">预设时间测试</text>
      <view class="preset-buttons">
        <button class="preset-btn" @tap="setPresetTime('09:00')">09:00</button>
        <button class="preset-btn" @tap="setPresetTime('09:30')">09:30</button>
        <button class="preset-btn" @tap="setPresetTime('14:00')">14:00</button>
        <button class="preset-btn" @tap="setPresetTime('14:30')">14:30</button>
        <button class="preset-btn" @tap="setPresetTime('18:00')">18:00</button>
      </view>
      <text class="result">预设时间：{{ presetTime || '未设置' }}</text>
    </view>
  </view>
</template>

<script>
import HalfHourPicker from '../../components/time-picker/half-hour-picker.vue'

export default {
  components: {
    HalfHourPicker
  },
  
  data() {
    return {
      selectedTime1: '',
      selectedTime2: '',
      startTime: '',
      endTime: '',
      presetTime: ''
    }
  },
  
  methods: {
    onTime1Change(time) {
      this.selectedTime1 = time
      console.log('基础时间选择:', time)
    },
    
    onTime2Change(time) {
      this.selectedTime2 = time
      console.log('限制范围时间选择:', time)
    },
    
    onStartTimeChange(time) {
      this.startTime = time
      // 如果结束时间早于开始时间，清空结束时间
      if (this.endTime && this.endTime <= time) {
        this.endTime = ''
      }
      console.log('开始时间选择:', time)
    },
    
    onEndTimeChange(time) {
      this.endTime = time
      console.log('结束时间选择:', time)
    },
    
    setPresetTime(time) {
      this.presetTime = time
      console.log('设置预设时间:', time)
    },
    
    calculateDuration() {
      if (!this.startTime || !this.endTime) return ''
      
      const [startHour, startMinute] = this.startTime.split(':').map(Number)
      const [endHour, endMinute] = this.endTime.split(':').map(Number)
      
      const startMinutes = startHour * 60 + startMinute
      const endMinutes = endHour * 60 + endMinute
      const durationMinutes = endMinutes - startMinutes
      
      if (durationMinutes <= 0) return '无效时长'
      
      const hours = Math.floor(durationMinutes / 60)
      const minutes = durationMinutes % 60
      
      if (hours === 0) {
        return `${minutes}分钟`
      } else if (minutes === 0) {
        return `${hours}小时`
      } else {
        return `${hours}小时${minutes}分钟`
      }
    }
  }
}
</script>

<style scoped>
.test-container {
  padding: 40rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.test-section {
  background: white;
  border-radius: 16rpx;
  padding: 40rpx;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.picker-row {
  display: flex;
  align-items: center;
  margin-bottom: 30rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 160rpx;
  flex-shrink: 0;
}

.result {
  font-size: 28rpx;
  color: #2196f3;
  margin-bottom: 20rpx;
  display: block;
}

.duration {
  font-size: 26rpx;
  color: #ff9800;
  display: block;
}

.preset-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.preset-btn {
  background: #e3f2fd;
  color: #2196f3;
  border: 2rpx solid #2196f3;
  border-radius: 8rpx;
  padding: 16rpx 32rpx;
  font-size: 26rpx;
  transition: all 0.3s ease;
}

.preset-btn:active {
  background: #2196f3;
  color: white;
  transform: scale(0.95);
}
</style>
